
// 3d饼图

function pie(res, dom) {
	var myChart = echarts.init(document.getElementById(dom));
	// 生成模拟 3D 饼图的配置项
	function getPie3D(pieData, internalDiameterRatio, leg, scale, gao) {
		let series = [];
		let sumValue = 0;
		let startValue = 0;
		let endValue = 0;
		let legendData = [];
		let legendBfb = [];
		let k = 1 - internalDiameterRatio;
		pieData.sort((a, b) => {
			return (b.value - a.value);
		});
		for (let i = 0; i < pieData.length; i++) {
			sumValue += pieData[i].value;
			let seriesItem = {
				name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
				type: 'surface',
				labelLine: {
					show: true,
					lineStyle: {
						color: '#000'
					},
					length: 10,
					length2: 10
				},
				parametric: true,
				wireframe: {
					show: false
				},
				pieData: pieData[i],
				pieStatus: {
					selected: false,
					hovered: false,
					k: k
				}
			};

			if (typeof pieData[i].itemStyle != 'undefined') {
				let itemStyle = {};
				typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
				typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
				seriesItem.itemStyle = itemStyle;
			}
			series.push(seriesItem);
		}
		legendData = [];
		legendBfb = [];
		for (let i = 0; i < series.length; i++) {
			endValue = startValue + series[i].pieData.value;
			series[i].pieData.startRatio = startValue / sumValue;
			series[i].pieData.endRatio = endValue / sumValue;
			series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
				false, false, k, series[i].pieData.value, scale);
			startValue = endValue;
			let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
			if (leg) {
				legendData.push({
					name: series[i].name,
					value: bfb
				});
			}
			legendBfb.push({
				name: series[i].name,
				value: bfb
			});
		}
		let boxHeight = getHeight3D(series, gao);
		// 补充一个透明的圆环，用于支撑高亮功能的近似实现。


		// 准备待返回的配置项，把准备好的 legendData、series 传入。
		let option = {
			labelLine: {
				show: true,
				lineStyle: {
					color: '#000'
				}
			},
			label: {
				show: true,
				position: 'outside',
				rich: {
					b: {
						color: '#000',
						fontSize: 12,
						lineHeight: 20
					},
					c: {
						fontSize: 16,
					},
				}
			},
			tooltip: {
				formatter: params => {
					if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
						let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
							100).toFixed(2);
						return `${params.seriesName}<br/>` +
							`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
							`${ bfb }%`;
					}
				}
			},
			xAxis3D: {
				min: -1,
				max: 1
			},
			yAxis3D: {
				min: -1,
				max: 1
			},
			zAxis3D: {
				min: -1,
				max: 1
			},
			grid3D: {
				top: res.top,
				show: false,
				boxHeight: boxHeight, //圆环的高度
				viewControl: { //3d效果可以放大、旋转等，请自己去查看官方配置
					alpha: 25, //角度
					distance: 300, //调整视角到主体的距离，类似调整zoom
					rotateSensitivity: 0, //设置为0无法旋转
					zoomSensitivity: 0, //设置为0无法缩放
					panSensitivity: 0, //设置为0无法平移
					autoRotate: true //自动旋转
				}
			},
			series: series
		};
		return option;
	}

	function getHeight3D(series, height) {
		series.sort((a, b) => {
			return (b.pieData.value - a.pieData.value);
		})
		return height * 25 / series[0].pieData.value;
	}

	// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
	function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h, scale) {
		// 计算
		let midRatio = (startRatio + endRatio) / 2;
		let startRadian = startRatio * Math.PI * 2;
		let endRadian = endRatio * Math.PI * 2;
		let midRadian = midRatio * Math.PI * 2;
		// 如果只有一个扇形，则不实现选中效果。
		if (startRatio === 0 && endRatio === 1) {
			isSelected = false;
		}
		// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
		k = typeof k !== 'undefined' ? k : 1 / 3;
		var rr = 1 - k
		// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
		let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
		let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
		// 计算高亮效果的放大比例（未高亮，则比例为 1）
		let hoverRate = isHovered ? 1.05 : scale;
		// 返回曲面参数方程
		return {
			u: {
				min: -Math.PI,
				max: Math.PI * 3,
				step: Math.PI / 32
			},
			v: {
				min: 0,
				max: Math.PI * 2,
				step: Math.PI / 20
			},
			x: function(u, v) {
				if (u < startRadian) {
					return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
				}
				if (u > endRadian) {
					return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
				}
				return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
			},

			y: function(u, v) {
				if (u < startRadian) {
					return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
				}
				if (u > endRadian) {
					return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
				}
				return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
			},
			z: function(u, v) {
				if (u < -Math.PI * 0.5) {
					return Math.sin(u);
				}
				if (u > Math.PI * 2.5) {
					return Math.sin(u) * h * .1;
				}
				return Math.sin(v) > 0 ? 1 * h * .1 : -1;
			}
		};
	}

	function fomatFloat(num, n) {
		var f = parseFloat(num);
		if (isNaN(f)) {
			return false;
		}
		f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂   
		var s = f.toString();
		var rs = s.indexOf('.');
		//判定如果是整数，增加小数点再补0
		if (rs < 0) {
			rs = s.length;
			s += '.';
		}
		while (s.length <= rs + n) {
			s += '0';
		}
		return s;
	}


	function bindListen(myChart) {
		let selectedIndex = '';
		let hoveredIndex = '';
		myChart.on('click', function(params) {
			// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
			let isSelected = option.series[params.seriesIndex].pieStatus.selected;
			let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
			let k = option.series[params.seriesIndex].pieStatus.k;
			let startRatio = option.series[params.seriesIndex].pieData.startRatio;
			let endRatio = option.series[params.seriesIndex].pieData.endRatio;
			// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
			if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
				option.series[selectedIndex].parametricEquation = getParametricEquation(option.series[selectedIndex].pieData.startRatio,
					option.series[selectedIndex].pieData.endRatio, false, false, k, option.series[selectedIndex].pieData.value);
				option.series[selectedIndex].pieStatus.selected = false;
			}
			option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected,
				isHovered, k, option.series[params.seriesIndex].pieData.value);
			option.series[params.seriesIndex].pieStatus.selected = isSelected;
			// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
			isSelected ? selectedIndex = params.seriesIndex : null;
			// 使用更新后的 option，渲染图表
			myChart.setOption(option);
		});
		myChart.on('mouseover', function(params) {
			// 准备重新渲染扇形所需的参数
			let isSelected;
			let isHovered;
			let startRatio;
			let endRatio;
			let k;
			// 如果触发 mouseover 的扇形当前已高亮，则不做操作
			if (hoveredIndex === params.seriesIndex) {
				return;
				// 否则进行高亮及必要的取消高亮操作
			} else {
				// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
				if (hoveredIndex !== '') {
					// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
					isSelected = option.series[hoveredIndex].pieStatus.selected;
					isHovered = false;
					startRatio = option.series[hoveredIndex].pieData.startRatio;
					endRatio = option.series[hoveredIndex].pieData.endRatio;
					k = option.series[hoveredIndex].pieStatus.k;
					// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
					option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio,
						isSelected,
						isHovered, k, option.series[hoveredIndex].pieData.value);
					option.series[hoveredIndex].pieStatus.hovered = isHovered;
					// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
					hoveredIndex = '';
				}
				// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
				if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
					// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
					isSelected = option.series[params.seriesIndex].pieStatus.selected;
					isHovered = true;
					startRatio = option.series[params.seriesIndex].pieData.startRatio;
					endRatio = option.series[params.seriesIndex].pieData.endRatio;
					k = option.series[params.seriesIndex].pieStatus.k;
					// 对当前点击的扇形，执行高亮操作（对 option 更新）
					option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio,
						isSelected, isHovered, k, option.series[params.seriesIndex].pieData.value + 5);
					option.series[params.seriesIndex].pieStatus.hovered = isHovered;
					// 记录上次高亮的扇形对应的系列号 seriesIndex
					hoveredIndex = params.seriesIndex;
				}
				// 使用更新后的 option，渲染图表
				myChart.setOption(option);
			}
		});
		myChart.on('globalout', function() {
			// 准备重新渲染扇形所需的参数
			let isSelected;
			let isHovered;
			let startRatio;
			let endRatio;
			let k;
			if (hoveredIndex !== '') {
				// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
				isSelected = option.series[hoveredIndex].pieStatus.selected;
				isHovered = false;
				k = option.series[hoveredIndex].pieStatus.k;
				startRatio = option.series[hoveredIndex].pieData.startRatio;
				endRatio = option.series[hoveredIndex].pieData.endRatio;
				// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
				option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio,
					isSelected,
					isHovered, k, option.series[hoveredIndex].pieData.value);
				option.series[hoveredIndex].pieStatus.hovered = isHovered;
				// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
				hoveredIndex = '';
			}
			// 使用更新后的 option，渲染图表
			myChart.setOption(option);
		});
	}
	option = getPie3D(res.data, res.ratio, res.leg, res.scale, res.height);
	lub(myChart,res.data)
	myChart.setOption(option);
	
}

function lub(myChart4,data1){
	var timeId2
	var currentIndex = -1;
	var dataLen = data1.length+1;
	timeId2 && clearInterval(timeId2);	
	timeId2=setInterval(function () {
		// 取消之前高亮的图形
		myChart4.dispatchAction({
		  type: 'downplay',
		  seriesIndex: 0,
		  dataIndex: currentIndex
		});
		currentIndex = (currentIndex + 1) % dataLen;
		//console.log(app.currentIndex);
		// 高亮当前图形
		myChart4.dispatchAction({
		  type: 'highlight',
		  seriesIndex: 0,
		  dataIndex: currentIndex,
		});
		// 显示 tooltip
		myChart4.dispatchAction({
		  type: 'showTip',
		  seriesIndex: 0,
		  dataIndex: currentIndex
		});
		if(currentIndex+1==dataLen){
			currentIndex=-1			
		}
	},2000);
	myChart4.on('mouseover', function () {
		clearInterval(timeId2);
	});
	
	myChart4.on('mouseout', function () {
		timeId2 && clearInterval(timeId2);
		timeId2 = setInterval(function () {
			myChart4.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
			});
			myChart4.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: currentIndex
			});
			myChart4.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: currentIndex
			});
			currentIndex = (currentIndex + 1) % dataLen;
			if(currentIndex+1==dataLen){
				currentIndex=-1
			}
		}, 2000);
	});
}


function line(res, dom) {
	var myChart = echarts.init(document.getElementById(dom));
	var series = []
	res.datas.forEach((item, index) => {
		series.push({
			data: item.item,
			type: 'line',
			smooth: res.smooth,
			lineStyle: {
				color: item.color,
			},
			areaStyle: {
				color: item.acolor
			},
			symbol: res.symbol,
			itemStyle: {
				normal: {
					color: item.color
				}
			}
		})
	});
	option = {
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'line' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		color: ['#159DF3', '#4CDCF0', '#62C625'],
		grid: {
			left: '5%',
			right: '8%',
			top: '20%',
			bottom: '5%',
			containLabel: true
		},
		yAxis: [{
			type: 'value',
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(78, 144, 242, 0.26)',
					type:'dashed'
				},
			},
			axisLabel: {
				interval: 0,
				textStyle: {
					color: '#fff', //坐标的字体颜色
					top: 20,
					lineHeight: 20,
					fontSize: 16
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#4E90F2',
					width: 1, //这里是坐标轴的宽度,可以去掉
				}
			}
		}],
		xAxis: {
			type: 'category',
			data: res.datax,
			boundaryGap: true,
			axisLabel: {
				// interval: 0,
				textStyle: {
					color: '#fff', //坐标的字体颜色
					lineHeight: 20,
					fontSize: 16
				}
			},
			splitLine: {
				show: false
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#4E90F2',
					width: 1, //这里是坐标轴的宽度,可以去掉
				}
			}
		},
		series: series
	};
	myChart.clear(option);
	myChart.setOption(option);
	window.addEventListener("resize", function() {
		myChart.resize();
	});
}


	function randerBox1(data){
		pie(data,'pie')
		$('#equipment').text(data['data'][0].value)
		$('#online').text(data['data'][1].value)
	}
	
	function randerBox2(data){
		$('#video').attr('src',data)
	}
	function randerBox3(data){
		$('#shebei1').text(data[0])
		$('#shebei2').text(data[1])
		$('#shebei3').text(data[2])
		$('#shebei4').text(data[3])
	}
	function randerBox4(data){		
		$("#t-height1").animate({
		  height:(100-data.t1)+'%',
		},'slow');
		$("#t-height2").animate({
		  bottom:data.t2+'%',
		},'slow');
		$('#ta1').text(data.t1)
		$('#ta4').text(data.t4)
		$('#ta2').text(data.t2)
		$('#ta3').text(data.t3)
		$(".zhen").animate({deg:data.t4},{
			duration:1000,
			step:function(now){
				$(this).css({
					transform: 'rotate('+now+'deg)'
				})
				
			}
		});
	}
	function randerBox5(data){
		$('#yujing').text(data.yujing)
		$('#baojing').text(data.baojing)
		$('#baojingList').html('')		
		data.list.forEach(item=>{
			$('#baojingList').append(`
			<li>
				<img src="img/page1/deng1.png" class="fl">
				<span class="fl">${item.name}</span>
				<span class="fr">${item.date}</span>
			</li>
			`)
		})
		var timer = setInterval(function() {
			topScroll(".scroll", 2000);
		}, 3000);
	}
	
	function randerBox6(data){
		$('#fudu').text(data.fudu)
		$('#gaodu').text(data.gaodu)
		$('#fengsu').text(data.fengsu)
		$('#diaozhong').text(data.diaozhong)
		$('#liju').text(data.liju)
		$('#hezai').text(data.hezai)
		$('#zhuanjiao').text(data.zhuanjiao)
		$('#qingjiao').text(data.qingjiao)
	}